<template>
  <div class="bj">
    <div class="box">
      <div class="header">后台管理系统</div>
      <el-form
        :label-position="labelPosition"
        label-width="70px"
        :model="formLabelAlign"
      >
        <el-form-item label="用户名：">
          <el-input
            v-model="formLabelAlign.name"
            placeholder="用户名"
            v-on:input="username"
          ></el-input>
        </el-form-item>
        <el-form-item label="密 码：">
          <el-input
            v-model="formLabelAlign.region"
            placeholder="密码"
            type="password"
            v-on:input="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <button type="" @click="enter">登录</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    username(e) {
      this.formLabelAlign.name = e;
    },
    password(e) {
      this.formLabelAlign.region = e;
    },
    enter() {
      this.$axios
        .post("api/admin/adminLogin", {
          managementCode: this.formLabelAlign.name,
          password: this.formLabelAlign.region,
        })
        .then((res) => {
          this.$router.push({ path: "/" });
        })
        .catch((res) => {
          alert("账号或密码错误");
        });
    },
  },
};
</script>
<style scoped>
.box {
  margin: 250px auto;
  width: 300px;
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 10px;
}
.header {
  margin-bottom: 20px;
  font-size: 25px;
}
button {
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 30px;
  background: skyblue;
  color: white;
  margin-top: 10px;
}
</style>